<template>
  <el-table
    border
    v-bind="$attrs"
    @selection-change="handleSelectionChange"
    :default-sort = "sort"
    @sort-change="reSort"
  >
    <el-table-column
      type="expand"
    >
      <template v-slot="{row}">
        <div style="width: 60%">
          <el-row>
            <el-col :span="14">
              <el-row>
                <el-col :span="4" class="text-info">题干</el-col>
                <el-col :span="20">{{row.content}}</el-col>
              </el-row>
              <el-row v-for="option in resolveOptions(row.options)" :key="option.index">
                <el-col :push="4">{{option}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="8" :push="2">
              <el-row>
                <el-col :span="8" class="text-info">答案</el-col>
                <el-col :span="16">
                  {{row.answer}}
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8" class="text-info">解析</el-col>
                <el-col :span="16">
                  {{row.analysis}}
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8" class="text-info">难度</el-col>
                <el-col :span="16">
                  {{row.level.name}}
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      fixed="left"
      label="全选"
      width="80"
      type="selection"
    >
    </el-table-column>
    <el-table-column
      sortable='custom'
      label="题型"
      width="100"
      prop="type"
    >
      <template v-slot="{row}">
        {{row.type.name}}
      </template>
    </el-table-column>
    <el-table-column
      sortable='custom'
      prop="category_id"
      label="分类"
      width="200">
      <template v-slot="{row}">
        {{row.category.name}}
      </template>
    </el-table-column>
    <el-table-column
      label="试题内容"
      width="400">
      <template v-slot="{row}">
        <el-tooltip  effect="dark" :content="row.content" placement="top-start">
          <div class="question">
            {{row.content}}
          </div>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column
      sortable='custom'
      label="难度"
      width="100"
      prop="level"
    >
      <template v-slot="{row}">
        {{row.level.name}}
      </template>
    </el-table-column>
    <el-table-column
      sortable='custom'
      label="创建人"
      prop="creator_id"
      width="180">
      <template v-slot="{row}">
        <el-tag type="success">{{row.creator.name}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      sortable='custom'
      label="创建时间"
      prop="gmt_create"
      width="180">
      <template v-slot="{row}">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ row.created }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="175"
      fixed="right"
    >
      <template v-slot="{$index,row}">
        <el-button
          size="mini"
          @click="handleEdit($index, row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete($index, row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  inheritAttrs: false,
  name: 'QuesTable',
  props: {
    sort: {
      type: Object,
      default: () => {
        return {
          prop: 'created',
          order: 'descending'
        }
      }
    }
  },
  methods: {
    handleSelectionChange (questions) {
      this.$store.commit('question/selectQuestions', questions)
    },
    handleEdit (index, row) {
      this.$store.dispatch('question/editRow', row)
        .then(() => {
          this.$router.push({ name: 'editQues' })
        })
    },
    handleDelete (index, row) {
      this.$store.dispatch('question/delRow', row)
    },
    resolveOptions (options) {
      let split = options.split('|')
      return split
    },
    reSort (sort) {
      this.$emit('on-question-resort', sort)
    }
  }
}
</script>

<style scoped lang="less">
  .question{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-col{
    padding: 8px 16px;
  }
</style>
